AULA05 - Estruturas de Repetição¶


AGENDA¶

  • Estrutura de Repetição
  • Utilizando break/continue
  • Referências
  • Perguntas

1. Estruturas de Repetição¶

  • While
  • Do... while
  • For
  • For ... in ...
  • For ... of ...

Para maiores detalhes, consulte Loop: while e for.¶

1.1. While¶

  • Uma declaração While executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira.
  • Se a condição se tornar falsa, a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.
  • O teste da condição ocorre antes que o laço seja executado:
    a) se a condição for verdadeira o laço executará e testará a condição novamente.
    b) se a condição for falsa o laço termina e passa o controle para as instruções após o laço.
while (condição) {
  ... declarações;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS_WHILE</title>
</head>
<body>
    <script>
        n = 0;
        x = 0;
        while (n < 3) {
          n++;
          x += n;
        }
        console.log(n);  
        console.log(x);
    </script>
</body>
</html>
Fonte: Autoria própria

1.2. Do ... While¶

  • Um laço Do ... While é repetido até que a condição especificada seja falsa.
  • Executa pelo menos uma vez, antes de testar a condição.
do {
  ... declarações;
} while (condição);
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS_DO-WHILE</title>
</head>
<body>
    <script>
        i = 0;
        do {
          i += 1;   // ou i++
          console.log(i);
        } while (i < 5);
    </script>
</body>
</html>
Fonte: Autoria própria

1.3. For¶

  • Um laço for é repetido até que a condição especificada seja falsa.
  • O laço for no JavaScript é similar ao Java e C.
  • Uma declaração for é feita da seguinte maneira:
for (declaração; condição; passos) {
  ... declarações
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS_FOR</title>
</head>
<body>
    <form name="selectForm">
      <p>
        <label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
        <select id="tipoMusica" name="tipoMusica" multiple="multiple">
          <option selected="selected">R&B</option>
          <option>Jazz</option>
          <option>Blues</option>
          <option>New Age</option>
          <option>Classico</option>
          <option>Ópera</option>
        </select>
      </p>
      <p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
    </form>

    <script>

        function howMany(selectObject) {
          var numeroSelecionadas = 0;
          for (var i = 0; i < selectObject.options.length; i++) {
            if (selectObject.options[i].selected) {
              numeroSelecionadas++;
            }
          }
          return numeroSelecionadas;
        }

        var btn = document.getElementById("btn");
        btn.addEventListener("click", function(){
          alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
        });
    </script>
</body>
</html>
Fonte: Autoria própria Fonte: Autoria própria

1.4. For ... In¶

  • A declaração for ... in executa iterações a partir de uma variável específica, percorrendo todas as propriedades de um objeto ou array.
  • Navega nos índices dos elementos do array.
  • Sintaxe:
for (variavel in objeto) {
    ... declarações 
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS_FOR-IN</title>
</head>
<body>
    <script>
        /*Então executará uma iteração para cada elemento e retornará uma lista de string, que irá conter o nome da propriedade e seu valor. */
        function iteracao(obj, obj_name) {
            var result = "";
            for (var i in obj) {
              result += obj_name + "[" + i + "] = " + obj[i] + "\n";
            }
            result += "****";
            return result;
          }

         console.log(iteracao([1, 2, 3, 4], 'item'));
    </script>
</body>
</html>
Fonte: Autoria própria

1.5. For ... Of¶

  • A declaração for ... of cria uma laço com objetos interativos (incluindo, array, map, set, assim por conseguinte), executando uma iteração para o valor de cada propriedade distinta.
  • Navega nos elementos do array.
  • Sintaxe:
for (variavel of objeto) {
    ... declarações 
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS_FOR-OF</title>
</head>
<body>
    <script>
        /* O exemplo a seguir mostra a diferença entre o for...of e o for...in. 
        Enquanto o for...in interage com o nome das propriedades, o for...of interage com o valor das propriedades. */
        let arr = [3, 5, 7];
        arr.foo = "hello";

        for (let i in arr) {
           console.log(i); // logs "0", "1", "2", "foo"
        }

        for (let i of arr) {
           console.log(i); // logs "3", "5", "7"
        }
    </script>
</body>
</html>
Fonte: Autoria própria

1.6. ForEach¶

  • O método forEach() chama uma função para cada elemento em um vetor.
  • O método forEach() não é executado para elementos vazios.
<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arrays</h1>
<h2>The forEach() Method</h2>
<p>forEach() calls a function for each element in an array:</p>
<p id="demo"></p>
<script>
let text = "";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

document.getElementById("demo").innerHTML = text;

function myFunction(item, index) {
  text += index + ": " + item + "<br>"; 
}
</script>

</body>
</html>
Fonte: Disponível em: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_foreach
Acesso em: 09 mar. 2023

1.7. Exercício¶

Elabore um programa que exiba um caracter em x quantidade de linhas. Aumentando a repetição conforme a linha.¶

x = prompt("Indique o caracter: ");
y = prompt("Indique a quantidade de linhas: ");
exibirCaracter(x, y);

function exibirCaracter(texto, linhas) {
    for(let l=1; l <= linhas; l++) {
        let desenho = '';
        for(let m=0; m < l; m++) {
            desenho += texto;
        }
        console.log(desenho);
    }

}
Fonte: Autoria própria

1.8. Iterando em um Array¶

let inicio = [ 'a', 'b', 'c', 'd'];

// Utilizando for .. of
for (letras of inicio) {
    console.log(letras);
}
Fonte: Autoria própria
let inicio = [ 'a', 'b', 'c', 'd'];

// Utilizando for .. in 
for (letras1 in inicio) {
    console.log(letras1);
}
Fonte: Autoria própria
let inicio = [ 'a', 'b', 'c', 'd'];

// Utilizando forEach
inicio.forEach(element => {
    console.log(element);
});
Fonte: Autoria própria

1.7.1. Outros exemplos¶

const valores = [1, 3, 5, 7, 9];

const uniao = valores.join('.');
console.log(uniao);
Fonte: Autoria própria
const url = "https://pt.stackoverflow.com/questions/242578/erro-no-javascript";
const parametros = url.split("/");
console.log(parametros);
Fonte: Autoria própria
const diversos = "O uso de Javascript no dia a dia";
const separar = diversos.split(" ");
console.log(separar);
const urlFinal = separar.join('-');
console.log(urlFinal);
Fonte: Autoria própria

2. Utilizando o break e continue¶

2.2. break¶

  • Normalmente em estruturas de repetiçao, quando a condição for falsa, sai do loop.
  • Quando se deseja sair em um certo momento, utiliza-se o break.
  • De acordo com Javascript.info, o exemplo pede ao usuário uma série de números, “quebrando” quando nenhum número é inserido.
  • O loop é interrompido imediatamente, passando o controle para a primeira linha após o loop. Ou seja, alerta.
let sum = 0;

while (true) {

  let value = +prompt("Enter a number", '');

  if (!value) break; // (*) será acionado caso o usuário cancele a entrada ou não informe nada.

  sum += value;

}
alert( 'Sum: ' + sum );

2.2. continue¶

  • O continue não interrompe o loop.
  • De acordo com Javscript.info, ele interrompe a iteração atual e força o loop a iniciar um novo (se a condição permitir).
  • Poderá ser utilizado para interromper a iteração atual e passar pra a próxima.
  • O loop usa continue para produzir apenas valores ímpares.
for (let i = 0; i < 10; i++) {

  // if true, skip the remaining part of the body
  if (i % 2 == 0) continue;

  alert(i); // 1, then 3, 5, 7, 9
}

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.
  • Javascript.info.


ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>